<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"><link rel="icon" href="img/icon.jpg">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=OZEoipk5UII7aZjwD4P4wGjLro2xXYRB"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title>最受欢迎农产品价格比较</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <style>
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑";
        }
        #l-map{
            height:500px;
            width:100%;
        }
        #r-result{
            width:100%;
            font-size:14px;
            line-height:20px;
        }

        body,html{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        #container{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #result{
            position: fixed;
            top: 10px;
            right: 10px;
            width: 150px;
            height: 180px;
            line-height: 30px;
            text-align: center;
            background: #fff;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
            border-radius: 7px;
            z-index: 99;
        }
        #result>div:first-child{
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background: #00BFFF;
            border-radius: 7px 7px 0px 0px;
            color: #fff;
        }
        #result ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #result ul li{
            color: #000;
            padding: 7px;
            font-size: 14px;
            text-align: justify;
            border-bottom: 1px solid #D3D3D3
        }
        #result>div:last-child{
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px;
        }
        .btn{
            width: 100px;
            height: 35px;
            color: #fff;
            font-size: 14px;;
            border-radius: 5px;
            background: #00BFFF;
            box-shadow: none;
        }
        .btn:hover{
            cursor: pointer;
        }
    </style>

</head>
<body>
<header class="head">
    <h3 class="head_button" ><a href="/">首页</a></h3>
    <h3 class="head_button"><a href="/hurt">小麦病虫害</a></h3>
    <h3 class="head_button" ><a   style="background-color: gray" href="/mostLike_addr">最受欢迎农产品价格比较</a></h3>
    <h3 class="head_button" ><a href="/line">农业总产值预测</a></h3>
    <h3 class="head_button" ><a href="/line_product">历史农产品价格</a></h3>
</header>
<section class="section">
    <div id='container'></div>
    <div id='result'>
        <div>解析地址回显地图</div>
        <select id="fru">
            <option value="1">鸡蛋</option>
            <option value="2">菠萝</option>
        </select>
        <div>
            <button onclick='bdGEO(1)' class='btn'>显示价格分布</button>
        </div>
    </div>
</section>
<script>
    var map = new BMapGL.Map('container');
    map.centerAndZoom(new BMapGL.Point(121.465197,37.482984), 13);
    map.enableScrollWheelZoom(true);
    var myGeo = new BMapGL.Geocoder();
    var adds = [
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'福山区大集农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.1,addr:'福山区超市（家家悦）'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:2.9,addr:'莱山区凤凰山农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.15,addr:'莱山区超市（振华）'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.26,addr:'芝罘区大海阳路农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.3,addr:'芝罘区超市（家家悦）'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.12,addr:'龙口市北大街生鲜西市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.6,addr:'龙口市东江市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'开发区星海农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'开发区恒达综合农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.7,addr:'蓬莱区登州市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.5,addr:'蓬莱区北市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:2.6,addr:'海阳市凤鸣海鲜农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'海阳市盛海市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'牟平区鸿乔农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:2.9,addr:'牟平区（家家悦）超市'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'招远市河东农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'招远市家家悦超市'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'栖霞市东山便民农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.11,addr:'栖霞市家家悦超市'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.2,addr:'莱阳农贸市场'},
        {name:"鸡蛋",mount:'500克',level:'新鲜',price:3.01,addr:'莱阳华润万家'},
    ];
    var adaplles = [
        {name:"菠萝",mount:'1kg',level:'进口',price:3.2,addr:'莱阳农贸市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.01,addr:'莱阳华润万家'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.3,addr:'芝罘区超市（家家悦）'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.12,addr:'龙口市北大街生鲜西市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.6,addr:'龙口市东江市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.2,addr:'开发区星海农贸市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.2,addr:'开发区恒达综合农贸市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.7,addr:'蓬莱区登州市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.5,addr:'蓬莱区北市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:2.6,addr:'海阳市凤鸣海鲜农贸市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.2,addr:'海阳市盛海市场'},
        {name:"菠萝",mount:'1kg',level:'进口',price:3.2,addr:'牟平区鸿乔农贸市场'},
    ]
    var index = 0;
    function bdGEO(ii){
        var ii =document.getElementById("fru").value;
        console.log(ii);
        var lists
        if(ii == 1){
            lists = adds;
        }else if( ii = 2){
            lists = adaplles;
        }
        if (index < lists.length) {
            var item = lists[index];
            geocodeSearch(item,ii);
            index++;
        }
    }
    function geocodeSearch(item,ii){
        var add = item.addr;
        if(ii==1){
            if(index < adds.length){
                setTimeout(window.bdGEO,100);
            }
        }else if(ii == 2){
            if(index < adaplles.length){
                setTimeout(window.bdGEO,100);
            }
        }

        myGeo.getPoint(add, function(point){
            if (point) {
                var address = new BMapGL.Point(point.lng, point.lat);
                addMarker(address,new BMapGL.Label(index+":"+add+item.name+item.price+'/'+item.mount,{offset:new BMapGL.Size(10,-10)}));
            }
        }, "合肥市");
    }
    // 编写自定义函数,创建标注
    function addMarker(point,label){
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
    }
    function getmodelEgg(price,addr) {
        return {name:"鸡蛋",mount:'500克',level:'新鲜',price:price,addr:addr};
    }


</script>
</body>
</html>